<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css2?family=Your+Chosen+Font&display=swap" rel="stylesheet">
    <title>焦迎奥16岁生日快乐❤️</title>
    <style>
        body {
            overflow: hidden;
            margin: 0;
            padding: 0;
            text-align: center;
            background-color: #f2f2f2;
            font-family: 'Your Chosen Font', cursive;
            animation: backgroundAnimation 5s infinite;
        }
        
        #snow-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        
        .snowflake {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
            opacity: 0.8;
            pointer-events: none;
            animation: snowfall linear infinite;
        }
        
        @keyframes snowfall {
            0% {
                transform: translateY(-100%);
            }
            100% {
                transform: translateY(100vh);
            }
        }
        
        #slideshow {
            width: 500px;
            height: 300px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }
        
        #slideshow img {
            max-width: 100%;
            max-height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        
        #slideshow img.active {
            opacity: 1;
        }
        
        @keyframes backgroundAnimation {
            0% {
                background-color: #ffafbd;
            }
            50% {
                background-color: #ffc3a0;
            }
            100% {
                background-color: #ffa0bd;
            }
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
            padding: 40px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        
        h1 {
            color: #ff69b4;
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        img {
            width: 200px;
            border-radius: 50%;
            margin: 1px 0px;
        }
        
        p {
            color: #333;
            line-height: 1.5;
            margin-bottom: 20px;
        }
        
        .fade-in {
            opacity: 0;
            animation: fadeInAnimation 2s forwards;
        }
        
        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        
        #countdown {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        
        .time {
            font-size: 36px;
            margin: 0 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            animation-fill-mode: forwards;
        }
        
        #days {
            background-color: #f5f5f5;
        }
        
        #hours {
            background-color: #e0e0e0;
        }
        
        #minutes {
            background-color: #d5d5d5;
        }
        
        #seconds {
            background-color: #cccccc;
        }
        
        .time span {
            display: inline-block;
            font-size: 14px;
            margin-top: 5px;
            color: #333;
        }
        
        .ribbon {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }
        
        .ribbon:before,
        .ribbon:after {
            content: "";
            position: absolute;
            display: block;
            width: 200px;
            height: 200px;
            background: linear-gradient(to bottom, #ff69b4, #ffc3a0, #ffafbd);
            border-radius: 50%;
            opacity: 0.6;
            animation: ribbonAnimation 2s infinite;
        }
        
        .ribbon:before {
            top: -100px;
            left: -50px;
        }
        
        .ribbon:after {
            top: -100px;
            right: -50px;
        }
        
        @keyframes ribbonAnimation {
            0% {
                transform: translate(0, 0) rotate(0);
            }
            100% {
                transform: translate(-800px, -800px) rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div id="snow-container"></div>

    <div class="fade-in">
        <h1>焦迎奥大人の生日页❤️</h1>
        <p>祝宝宝天天开心ღ( ´･ᴗ･` )</p>
    </div>

    <div class="container">
        <h1>生日快乐！</h1>
        <div id="slideshow">
            <img src="1.jpg">
            <img src="2.jpg">
            <img src="3.jpg">
            <img src="4.jpg">
            <img src="5.jpg">
            <img src="6.jpg">
            <img src="7.jpg">
            <img src="8.jpg">

        </div>
        <p>To焦迎奥:</p>
        <p>愿无事绊心弦 所念皆如愿</p>
        <p>祝福你新的一岁</p>
        <p>可可爱爱 有梦可待</p>
        <p>追求热爱 生活不赖</p>
        <p>天天开心♡＾▽＾♡</p>
        <p>祝你幸福 每天都是！</p>
        <p>下次生日倒计时:</p>
    </div>

    <div id="countdown">
        <div class="time" id="days"></div>
        <div class="time" id="hours"></div>
        <div class="time" id="minutes"></div>
        <div class="time" id="seconds"></div>
    </div>

    <script>
        const birthday = new Date("2025-04-19");

        function updateCountdown() {
            const now = new Date();
            const difference = birthday - now;


            const days = Math.floor(difference / (1000 * 60 * 60 * 24));
            const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
            const minutes = Math.floor((difference / 1000 / 60) % 60);
            const seconds = Math.floor((difference / 1000) % 60);


            document.getElementById("days").textContent = days.toString().padStart(2, "0") + "天";
            document.getElementById("hours").textContent = hours.toString().padStart(2, "0") + "小时";
            document.getElementById("minutes").textContent = minutes.toString().padStart(2, "0") + "分钟";
            document.getElementById("seconds").textContent = seconds.toString().padStart(2, "0") + "秒";
        }


        setInterval(updateCountdown, 1000);
    </script>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var currentIndex = 0;
            var slides = $('#slideshow img');
            var slideCount = slides.length;

            function showSlide(index) {
                slides.removeClass('active');
                slides.eq(index).addClass('active');
            }

            function nextSlide() {
                currentIndex = (currentIndex + 1) % slideCount;
                showSlide(currentIndex);
            }


            setInterval(nextSlide, 3000);


            showSlide(currentIndex);
        });
    </script>
    <script>
        function createSnowflake() {
            const snowflake = document.createElement('div');
            snowflake.classList.add('snowflake');
            snowflake.style.left = Math.random() * window.innerWidth + 'px';
            snowflake.style.animationDuration = Math.random() * 5 + 5 + 's';
            snowflake.style.opacity = Math.random();
            snowflake.style.fontSize = Math.random() * 10 + 10 + 'px';

            const randomColor = getRandomColor();
            snowflake.style.backgroundColor = randomColor;

            snowflake.innerHTML = '生日快乐❤️';

            return snowflake;
        }

        function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

        function snowfall() {
            const snowContainer = document.getElementById('snow-container');
            const numSnowflakes = 50; // Adjust the number of snowflakes here

            for (let i = 0; i < numSnowflakes; i++) {
                const snowflake = createSnowflake();
                snowContainer.appendChild(snowflake);
            }
        }

        snowfall();
    </script>
</body>

</html>